<template>
  <div class="container">
    <DocHeader :title="title" fromDoc="anxietySheet">
      <template slot="before">
        <div class="tac" style="font-size: 16px; margin-bottom: 10px">
          (7-Item Anxiety Scale,GAD-7)
        </div>
      </template>
    </DocHeader>
    <div class="content">
      <div class="mb8">
        根据过去两周的状况，请您回答是否存在下列描述的状况及频率，请看清楚问题后选择符合您的选项。
      </div>
      <div class="flex bort">
        <div class="flex-3 borl"></div>
        <div class="flex-4 borl borr cell">选项</div>
      </div>
      <!--  -->
      <div class="flex bort">
        <div class="flex-3 borl"></div>
        <div class="flex flex-4 borl">
          <div class="flex-1 cell borr">完全不会</div>
          <div class="flex-1 cell borr">好几天</div>
          <div class="flex-1 cell borr">超过一周</div>
          <div class="flex-1 cell borr">几乎每天</div>
        </div>
      </div>
      <!--  -->
      <div v-for="items in pageData.list" :key="items.title" class="flex bort">
        <div class="flex-3 borl cell start">&nbsp; {{ items.title }}</div>
        <el-radio-group v-model="items.value" class="flex flex-4 borl">
          <div v-for="i in 4" :key="i" class="flex-1 cell borr">
            <el-radio :label="i - 1"></el-radio>
          </div>
        </el-radio-group>
      </div>
      <!--  -->
      <div class="flex bort borl borb borr" style="margin-bottom: 12px">
        <div
          class="flex cell start"
          style="flex-direction: row; line-height: 30px"
        >
          <div>&nbsp; GAD-7总分：</div>
          <div>&nbsp; {{ pageData.total }}</div>
        </div>
      </div>
      <!--  -->
      <div class="tac mb8" style="font-size: 18px">PHQ-9量表评分规则</div>
      <!--  -->
      <div class="flex bort borl borr">
        <div class="flex flex-1">
          <div class="flex-1 borr cell">结果分析</div>
          <div class="flex-1 borr cell">没有焦虑</div>
          <div class="flex-1 borr cell">轻度焦虑</div>
          <div class="flex-1 borr cell">中度焦虑</div>
          <div class="flex-1 cell">重度焦虑</div>
        </div>
      </div>
      <!--  -->
      <div class="flex bort borl borr borb mb8">
        <div class="flex flex-1">
          <div class="flex-1 borr cell">总分</div>
          <div class="flex-1 borr cell">0-4分</div>
          <div class="flex-1 borr cell">5-9分</div>
          <div class="flex-1 borr cell">10-14分</div>
          <div class="flex-1 cell">15-21分</div>
        </div>
      </div>
      <!--  -->
      <div>
        心理科评定结果及诊疗计划：
        <el-input v-model="pageData.plan" style="width: 500px" class="input" />
      </div>
      <!--  -->
      <div class="flex sign">
        <div class="nurse" @click="getParams">
          评定医师：
          <el-input
            v-model="pageData.sign"
            style="width: 100px"
            class="input"
          />
        </div>
        <div class="time flex">
          <div>评定时间：</div>
          <el-input
            v-model="pageData.time"
            style="width: 180px"
            class="input"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    },
    formType: {
      type: String,
      default: 'add'
    },
    type: {
      type: String,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: ''
    })
    const store = getStoreFromInstance()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(
          cloneDeep(baseData(user.value.name)),
          jsonText
        )
      } else {
        nextTick(() => {
          state.pageData = baseData(user.value.name)
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    watch(
      () => state.pageData.list,
      val => {
        if (val) {
          let sum = 0
          val.forEach(res => {
            sum += Number(res.value)
          })
          state.pageData.total = sum
        }
      },
      { deep: true }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      getParams
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  margin: 0 8px !important;
}

.container {
  padding: 20px;
  // margin: getpx(30) auto 0;
  // width: calc(100% - 66px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  .content {
    margin-top: 20px;
  }
}

.input {
  width: 80%;

  :deep {
    .el-input__inner {
      border: none;
      font-size: 13px;
      color: #000;
      padding: 0;
      line-height: 1;
      height: 16px;
    }
  }
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cell {
  display: flex;
  height: 30px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.start {
  align-items: start;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.sign {
  flex-flow: column nowrap;
  align-items: flex-end;
  margin-top: 50px;
  line-height: 32px;

  & > div {
    width: 35%;
  }
}

.mb8 {
  margin-bottom: 8px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}

.pad8 {
  padding: 8px;
}
</style>
